<template>
  <!-- 邮件 -->
  <div class="information-content-h5 emails-h5-information">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="deleMail"><i-ph-trash-bold />{{ t("notice.Deletes") }}</h4>
    </h1>
    <div class="emails-h5" v-loading.fullscreen.lock="loading">
      <transition name="emailsbox">
        <ul class="email-box" v-show="!emailContentOpened">
          <li v-for="email in emails" :key="email.emailId" class="email-box-item" @click="openEmailContent(email)">
            <van-badge :dot="!email.readStatus">
              <img :src="images.maillogo" alt="">
            </van-badge>
            <div class="email-info">
              <div class="email-info__title">{{ email.content }}</div>
              <div class="email-info__time">{{ parseTime(email.createTime)}}</div>
            </div>
            <div class="email-linker" v-if="email.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span><i-ep-arrow-right-bold />
            </div>
          </li>
        </ul>
      </transition>
      <transition name="emailscontent">
        <div class="email-box" v-show="emailContentOpened">
          <div class="email-box__header email-box-item">
            <img :src="images.maillogo" alt="">
            <div class="email-info">
              <div class="email-info__title">{{ emailContent.name }}</div>
              <div class="email-info__time">{{ parseTime(emailContent.createTime) }}</div>
            </div>
          </div>
          <div class="email-box__content">
            <p>{{ emailContent.content }}</p>
            <div class="email-box__content-footer" v-if="emailContent.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span>：
              <img :src="splitForReward(emailContent.reward, 'pic')" alt=""> +{{ splitForReward(emailContent.reward, 'money') }}
            </div>
          </div>
          <div class="email-box__tips"> If you have any questions kindly get in touch with our 24x7 customer service </div>
        </div>
      </transition>
      <div class="no-content-yet" v-if="emails.length === 0">{{t('BetRecord.Nocontent')}}</div>
      <div class="onebyone">
        <el-button type="primary" @click="onebyone">{{receive}}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="EmailH5">
import userinfo from '@/store/userinfo';
import userinfoApi from '@/api/modules/userinfo';
import { parseTime } from '@/utils/format';
import system from '@/store/system';

const { t } = useI18n();
const global:any = getCurrentInstance()?.appContext.config.globalProperties;
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const images: any = reactive({
  maillogo: new URL(`../../assets/images/header/maillogo.svg`, import.meta.url).href,
});
const data:any = reactive({
  emailContentOpened: false,
  emails: computed(()=>{
    let emailsList = piniaUserinfo.getEmail || [];
    emailsList.forEach((element: any) => {
      const currentLanContent = (element.lanContent || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
      const currentLanName = (element.lanName || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
      if(currentLanContent.content){
        element.content = currentLanContent.content;
      }
      if(currentLanName.content){
        element.name = currentLanName.content;
      }
    });
    return emailsList;
  }),
  emailContent: {},
  receive: t('notice.text14'),
  loading: false,
});

const {
  emailContentOpened,
  emails,
  emailContent,
  receive,
  loading,
} = toRefs(data);


// 打开邮件
const openEmailContent = (email: any) => {
  emailContent.value = email;
  emailContentOpened.value = true;
  updateReadStatus(email.emailId);
}

// 更新已读状态
const updateReadStatus = (id?: string) => {
  let queryData = id ? {id: id} : {};
  userinfoApi.updateReadEmailStatus(queryData).then((res:any)=>{
    if(res.code === 200){
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 附件领取状态
const updateRewardStatus = (id?: string) => {
  let queryData = id ? {id: id} : {};
  userinfoApi.updateRewardEmailStatus(queryData).then((response:any)=>{
    if(response.code === 200){
      global.message(response.msg);
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 依次领取
const onebyone = () => {
  if(!emailContentOpened){
    updateRewardStatus();
    updateReadStatus();
  }else{
    updateRewardStatus(emailContent.value.emailId);
  }
}

// 删除所有邮件
const deleMail = () => {
  userinfoApi.deleMail({}).then((response: any)=>{
    if(response.code === 200){
      global.message(response.msg);
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 切割
const splitForReward = (reward: any, type: string) => {
  if(!reward){
    return 0;
  }else{
    const arr = reward.split(',');
    if(type === 'money'){
      return arr[1];
    }else if(type === 'pic'){
      const walletMoney = piniaUserinfo.getWallet.find((im:any)=> im.currencyId == arr[0]);
      return walletMoney.currencyIcon;
    }
  }
}


const goBack = () => {
  if(emailContentOpened.value){
    emailContentOpened.value = false;
  }else{
    emits('back');
  }
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.information-content-h5{
  &.emails-h5-information{
    height: 100%;
  }
}
.emails-h5{
  position: relative;
  height: calc(100% - var(--rem-120));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  .email-box{
    position: absolute;
    width: 100%;
    padding: var(--rem-20);
    .email-box-item{
      position: relative;
      background-color: var(--z-bg-def);
      border-radius: var(--rem-30);
      display: flex;
      align-items: center;
      height: var(--rem-60);
      margin-bottom: var(--rem-10);
      cursor: pointer;
      .email-info__title{
        font-size: var(--rem-14);
        font-weight: bold;
        color: var(--z-font-anti);
        width: var(--rem-250);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .email-info__time{
        font-size: var(--rem-12);
      }
      .email-info{
        margin-left: var(--rem-8);
      }
      .email-linker{
        display: flex;
        align-items: center;
        font-size: var(--rem-12);
        margin-left: auto;
        span{
          margin: 0 var(--rem-8);
        }
        svg{
          font-size: var(--rem-10);
        }
      }
      &.email-box__header{
        background-color: transparent;
      }
    }
    .email-box__content{
      margin-left: var(--rem-55);
      background-color: var(--z-bg-def);
      border-radius: var(--rem-20);
      padding: var(--rem-20);
      box-sizing: border-box;
      color: var(--z-font-anti);
      p{
        min-height: var(--rem-80);
      }
      .email-box__content-footer{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: var(--rem-10);
        img{
          width: var(--rem-18);
          height: var(--rem-18);
          margin-left: var(--rem-15);
          margin-right: var(--rem-10);
        }
      }
    }
    .email-box__tips{
      margin-left: var(--rem-70);
      font-size: var(--rem-12);
      margin-top: var(--rem-15);
    }
  }
  .onebyone{
    position: fixed;
    background-color: var(--z-bg-content);
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--rem-60);
    bottom: 0;
    button{
      width: 80%;
    }
  }
}
.no-content-yet{
  text-align: center;
  line-height: 175rem;
}
$timer: 0.7s;
.emailsbox-enter-active {
  animation: bounceInLeft $timer;
}
.emailsbox-leave-active {
  animation: bounceOutLeft $timer;
}
.emailscontent-enter-active {
  animation: bounceInRight $timer;
}
.emailscontent-leave-active {
  animation: bounceOutRight $timer;
}
</style>
